<template>
    <div id="btsAreaPos">
        <el-radio-group v-model="area">
            <el-col :span="6" v-for="item in btsAreaPos" :key="item.id">
                <el-radio :label="item.value">
                    <img :src="item.src" alt="">
                    <span>{{item.text}}</span>
                </el-radio>
            </el-col>
        </el-radio-group>
    </div>
</template>

<script>
    export default {
        props: ['areaPos'],
        data() {
            return{
                area: this.areaPos,
                btsAreaPos: [
                    { id: 0, value: 'm', text: '中间', src: require('@/assets/imgs/img_btsArea_m.svg') },
                    { id: 1, value: 'all', text: '全屏', src: require('@/assets/imgs/img_btsArea_all.svg') },
                    { id: 2, value: 't', text: '中上', src: require('@/assets/imgs/img_btsArea_t.svg') },
                    { id: 3, value: 'b', text: '中下', src: require('@/assets/imgs/img_btsArea_b.svg') },
                    { id: 4, value: 'l', text: '左侧', src: require('@/assets/imgs/img_btsArea_l.svg') },
                    { id: 5, value: 'r', text: '右侧', src: require('@/assets/imgs/img_btsArea_r.svg') },
                    { id: 6, value: 'lt', text: '左上侧', src: require('@/assets/imgs/img_btsArea_lt.svg') },
                    { id: 7, value: 'lb', text: '左下侧', src: require('@/assets/imgs/img_btsArea_lb.svg') },
                    { id: 8, value: 'rt', text: '右上侧', src: require('@/assets/imgs/img_btsArea_rt.svg') },
                    { id: 9, value: 'rb', text: '右下侧', src: require('@/assets/imgs/img_btsArea_rb.svg') },
                    { id: 10, value: 'lm', text: '左中', src: require('@/assets/imgs/img_btsArea_lm.svg') },
                    { id: 11, value: 'rm', text: '右中', src: require('@/assets/imgs/img_btsArea_rm.svg') },
                ]
            }
        },
        methods: {
            
        },
        watch: {
            'areaPos': {
                handler(){
                    this.area = this.areaPos;
                },
                deep: true
            }
        }
    }
</script>

<style lang="scss">
    #btsAreaPos{
        .el-radio-group{
            .el-radio{
                display: block;
                width: 120px;
                padding-top: 75px;
                text-align: center;
                position: relative;
                margin: 15px auto;

                img{
                    position: absolute;
                    left: 3px;
                    top: 0px;
                }
            }
        }
    }
</style>


